<template>
	<view>
		<view class="item">
			<view class="item_content bg-white" @click="getDetails(item.content_id)">
				<view class="Media Media--center">
					<view class="Media-body">
						<view class="item-title">
							<u-tag v-if="item.is_expires==1" class="expired" size="mini" text="已过期" plain plainFill bg-color="#F0F0F0" color="#A6A6A6" border-color="#F0F0F0" mode="dark" style="font-weight: normal;" />
							<u-tag class="tag" :text="categoryMap[item.category_ids[0]].label"
							 plain plainFill mode="dark" size="mini" :bg-color="item.category_ids[0]==3?'#EDF8F1':'#EDF8FF'" :color="item.category_ids[0]==3?'#52B36D':'#3EA5E9'" :border-color="item.category_ids[0]==3?'#EDF8F1':'#EDF8FF'" style="font-weight: normal;" />
							{{item.name}}
						</view>
						<!-- 若当前用户具备新人首免资格且当前方案启用新人首免，那么仅展示新人首免最优权益 -->
						<view class="Grid Grid--center yxgjStyle" style="margin-top: 7px;padding: 0 3px;">
							<view v-for="(i, index) in item.market_ids.filter(i => item.market_ids.includes(4) && !userInfo.orders ? i == 4 : (i != 5 && i != 1 && i != 4))" :key="index" style="margin-right: 8px;">
								<u-tag :text="setting.market[i].title" class="tag" mode="dark" plain plainFill size="mini" bg-color="#FFEFE4" color="#FF8D40" border-color="#FFEFE4" style="font-weight: normal;"></u-tag>
							</view>
						</view>
					</view>
					<view v-if="item.type == 2" style="margin-left: 5px;">
						<view class="Grid Grid--center Grid--justifyCenter" style="width: 90px; height: 90px; overflow: hidden; position: relative;">
							<u--image :width="90" :height="90" mode="aspectFill" :src="item.vid_img" :radius="10"></u--image>
							<view class="Grid Grid--center Grid--justifyCenter" style="position: absolute; width: 35px; height: 35px; border-radius: 50%; background: rgba(0, 0, 0, .6);">
								<u-icon name="play-right-fill" color="#ffffff" :size="12" style="margin-left: 3px;"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view v-if="currentIndex==0" class="Grid Grid--center" style="margin-top: 10px;padding: 0 3px;">
					<view class="Grid Grid--center" style="flex: 1;color: #999999;font-size: 12px;line-height: 19px;">
						<u-icon name="clock-fill" color="#E0DFDF" size="14" style="margin-right: 6px;"></u-icon>{{item.release_time.substring(5,16)}}
					</view>
					<view class="Grid Grid--center">
						<view class="Grid Grid--center" style="color: #999999;font-size: 12px;line-height: 19px;margin-right: 6px;"><u-icon name="eye-fill" color="#E0DFDF" size="16" style="margin-right: 6px;"></u-icon>{{item.hits_show}}</view>
						<!-- <view class="Grid Grid--center" style="color: #999999;font-size: 12px;line-height: 19px;"><u-icon name="shopping-cart-fill" color="#E0DFDF" size="19" style="margin-right: 6px;"></u-icon>{{ item.buy_show }}</view> -->
					</view>
					<text v-if="item.market_ids.includes(5) && item.marketing_tools[5].status && !(item.market_ids.includes(4) && !userInfo.orders) && !item.pay_status" style="margin-left: 10px;font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 12px;color: #ED5454;line-height: 19px;">还剩{{item.marketing_tools[5].surplus_show}}份</text>
					<!-- ·&nbsp;&nbsp;{{item.buy_show}}&nbsp;已购买数 -->
				</view>
				
				<view class="text-xs" :class="(item.market_ids.includes(5) && item.marketing_tools[5].status && !(item.market_ids.includes(4) && !userInfo.orders) && !item.pay_status)?'msjsStyle':''" style="padding: 4px;background: #fff;margin-top: 14px;border-radius: 5px;">
					<view class="Grid Grid--center" style="margin-bottom: 5px;">
						<view class="Grid Grid--center" style="flex: 1;">
							<view class="Grid Grid--center" style="display: inline-block; color: #e45656;">
								<!-- <text style="padding: 0 4px">限时秒杀</text> -->
								<text v-if="item.market_ids.includes(5)" style="padding: 2px 4px;color: #FFF63A;font-weight: 600;background: #ED5454;border-radius: 2px;">{{item.marketing_tools[5].status ? '限时秒杀' : '秒杀结束'}}</text>
								<u-count-down v-if="item.market_ids.includes(5) && item.marketing_tools[5].status && !(item.market_ids.includes(4) && !userInfo.orders) && !item.pay_status" :time="item.marketing_tools[5].secs * 1000" format="DD:HH:mm:ss" autoStart millisecond
									@change="onChange" style="display: inline-block;">
									<view class="time">
										<view class="time__custom" v-if="timeData.days">
											<text class="time__custom__item">{{ timeData.days > 9 ? timeData.days : '0' + timeData.days }}</text>
										</view>
										<text v-if="timeData.days" class="time__doc">天</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours }}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes }}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds }}</text>
										</view>
									</view>
								</u-count-down>
							</view>
						</view>
						<view class="Media Media--center Media--justifyCenter  item-time-num">
							<!-- 非新人首免 -->
							<view v-if="!(item.market_ids.includes(4) && !userInfo.orders)" class="text-right Grid Grid--center">
								<view class="item-time-num-price" :style="{'font-size': '18px','margin-right': '8px', 'color': item.market_ids.includes(5) && item.marketing_tools[5].status ? '#FFFFFF' : '#ed5454'}">
									<text v-if="item.price * 1" style="font-weight: 500; font-size: 12px; line-height: 20px;" :style="item.market_ids.includes(5) && item.marketing_tools[5].status?'text-decoration:line-through' : 'initial'">￥</text>
									<text :style="{'font-size': item.market_ids.includes(5) && item.marketing_tools[5].status ? '12px' : '16px','text-decoration': item.market_ids.includes(5) && item.marketing_tools[5].status ? 'line-through !important' : 'initial'}">{{!(item.price * 1) ? '免费' : item.price}}</text>
								</view>
								<view class="ms-item-time-num-price" v-if="item.market_ids.includes(5) && item.marketing_tools[5].status" style="color: #E25E23;font-size:18px">
									<text v-if="item.price * 1" style="font-weight: 500; font-size: 12px; line-height: 20px;">￥</text>
									<text style="font-size: 16px; font-weight: bold;">{{item.marketing_tools[5].seckill_price}}</text>
								</view>
							</view>
							<!-- 新人首免 -->
							<view v-if="item.market_ids.includes(4) && !userInfo.orders">
								<view style="color: #E25E23;font-size:18px">
									<text style="font-size: 16px;">免费获取</text>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view v-if="item.match_info" class="item-content">
							<view style="text-align: center; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;line-height: 18px;font-weight: 600;font-size: 12px;color: #E52727;">{{item.match_info.competition_info.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.match_info.match_time.substring(5,16) }}</view>
							<view class="Grid Grid--center Grid--justifyCenter team">
								<view class="Grid Grid--center Grid--justifyCenter"><u--image :width="20" :height="20" :src="item.match_info.home_team_info.logo" shape="circle" style="margin-right: 6px;"></u--image>{{item.match_info.home_team_info.team_name}}</view>
								<text>VS</text>
								<view class="Grid Grid--center Grid--justifyCenter"><u--image :width="20" :height="20" :src="item.match_info.away_team_info.logo" shape="circle" style="margin-right: 6px;"></u--image>{{item.match_info.away_team_info.team_name}}</view>
							</view>
						</view>
						<view v-else class="item-content">
							<view class="Grid Grid--center Grid--justifyCenter" style="text-align: center; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 600;font-size: 12px;color: #E52727;">
								<view style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-right: 16px;width: 82%;">{{item.match_nick}}</view>
								{{ item.match_date.substring(5,16) }}</view>
						</view>
					</view>
				</view>

				<!-- v-if="item.pay_status == 1"
				v-if="item.pay_status == 2" -->
				<img v-if="item.pay_status == 1" style="position: absolute;left: 0;top: 0;width: 36px;" src="@/static/images/buy-bs.png" alt="">
				<img v-if="item.pay_status == 2" style="position: absolute;left: 0;top: 0;width: 36px;" src="@/static/images/refund.png" alt="">

				<!-- pay_status: 0 未购 1 已购 2 已购并退款 -->
				<!-- <view v-if="item.pay_status" class="Grid Grid--justifyFlexEnd text-sm">
					<text v-if="item.pay_status == 1" style="color: #5ac725;">已购买</text>
					<text v-if="item.pay_status == 2" style="color: #5ac725;">已购买<text
							style="color: #f56c6c;">(已退)</text></text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		mapState
	} from "vuex";

	export default {
		name: 'Item',
		props: {
			item: {
				type: Object,
				default: () => []
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			}
		},
		data() {
			return {
				isClick: false,
				categoryMap: {
					3: {
						label: '足球',
						color: '#00b42a'
					},
					4: {
						label: '篮球',
						color: '#ffbf29'
					}
				},
				timeData: {},
				marketIconMap: {
					1: 'gift', // 留资优惠
					2: 'red-packet', // 不中包退
					3: 'coupon', // 买一送一
					4: 'gift', // 新人首免
					5: 'clock', // 定时秒杀
				},
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				setting: state => state.login.setting
			})
		},
		mounted() {
			
		},
		destroyed() {

		},
		onHide() {},
		methods: {
			// 点击查看详情
			getDetails(id) {
				window.removeEventListener("scroll", this.handleScroll);
				window.removeEventListener("click", this.handleScroll);
				uni.navigateTo({
					url: `/pages/details/details?content_id=${id}&currentIndex=${this.currentIndex}&appid=${this.userInfo.appid}`
				})
			},
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 0 15px;
		margin-top: 10px;
		position: relative;
		// overflow: hidden;
		.item_content{
			border-radius: 10px;
			padding: 15px 13px;
			position: relative;
		}
		.item-img {
			width: 38px;
			height: 38px;
			position: absolute;
			right: 0;
			top: 0;
			transform: rotate(22deg);
		}

		// 标题
		.item-title {
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
			-webkit-line-clamp: 2;
			/*要显示的行数*/
			/* autoprefixer: off */
			-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
			word-break: break-all;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 600;
			font-size: 14px;
			color: #222222;
			line-height: 19px;
			padding: 0 3px;
			.expired{
				font-size: 10px;
				display: inline-block;
				margin-right: 5px;
			}
			.tag {
				font-size: 10px;
				display: inline-block;
				margin-right: 6px;
				
				::v-deep .u-tag--mini {
					padding: 0;
					height: 18px;
					line-height: 18px;
					justify-content: center;
				}
			}
			::v-deep .u-tag--mini{
				height: 18px;
				padding: 0 5px !important;
			}
		}
		.yxgjStyle{
			.tag {
				font-size: 10px;
				display: inline-block;
				margin-right: 6px;
				
				::v-deep .u-tag--mini {
					padding: 0;
					height: 18px;
					line-height: 18px;
					justify-content: center;
				}
			}
			::v-deep .u-tag__text--mini{
				font-size: 10px;
    			line-height: 10px;
			}
			::v-deep .u-tag--mini{
				height: 18px;
				padding: 0 5px !important;
			}
		}

		// 已过期
		.item-stale {
			width: 45px;
			height: 20px;
			background: #F3F3F3;
			font-size: 11px;
			color: rgba(0, 0, 0, 0.4);
			line-height: 20px;
			padding: 0;
			text-align: center;
			display: inline-block;
			margin-top: 6px;
		}

		// 内容
		.item-content {
			background: #FFF0F0;
			border-radius: 4px 4px 4px 4px;
			font-size: 12px;
			color: rgba(0, 0, 0, 0.6);
			line-height: 28px;
			padding: 6px;
			// margin: 6px 0 0 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			.team{
				position: relative;
				margin-top: 6px;
				&>view{
					width: 50%;
					background: #FFFFFF;
					border-radius: 200px;
					text-align: center;
					font-size: 12px;
					color: #222222;
				}
				&>text{
					position: absolute;
					width: 15px;
					height: 15px;
					background: #E52727;
					text-align: center;
					border-radius: 100%;
					color: #fff;
					line-height: 15px;
					padding: 3px;
				}
			}
			
		}

		//发布数据·浏览量·已购买数量
		.item-time-num {
			font-size: 12px;
			color: rgba(0, 0, 0, 0.4);
			line-height: 20px;
			text-align: left;
			display: flex;

			&>view:nth-child(1) {
				flex: 1;
			}

			.item-time-num-price {
				text-align: right;
			}
		}
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			// margin-top: 4px;
			// width: 22px;
			// height: 22px;
			// background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
			background: #fff;
			color: #ED5454;
			padding: 0 2px;

			&__item {
				// color: #fff;
				color: #ED5454;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: #fff;
			padding: 0px 4px;
		}
		
		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
	.msjsStyle{
		background: #ed5454 !important;
		.ms-item-time-num-price{
			color: #FFF000 !important;
		}
	}
</style>